@if (reportsError) {
  <div class="p-3">
    <app-error-card title="Failed to find crash reports" [error]="reportsError" (retry)="reload()"></app-error-card>
  </div>
} @else {
  <div class="w-100 h-100 p-3 overflow-y-auto" [ngSwitch]="reports?.length">
    <div class="card m-1" *ngSwitchCase="0">
      <div class="card-body">
        <h5 class="card-title">No crash reports</h5>
        <p class="card-text">If a native application crashes, the crash report will be available here.</p>
      </div>
    </div>
    <ol class="list-group list-group-numbered" *ngSwitchDefault>
      <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
          (click)="openDetails(report)" *ngFor="let report of reports">
        <div class="ms-2 me-auto">
          <div class="fw-bold">{{ report.title }}</div>
          {{ report.summary }}
        </div>
        <div>
          <button class="btn btn-link text-danger" type="button" (click)="$event.stopPropagation();deleteReport(report)"
                  *ngIf="report.file.access?.write">
            <i class="bi bi-trash"></i>
          </button>
        </div>
      </li>
    </ol>
  </div>
}
